<template>
  <sub-page class="xifenIndex">
    <xifen-header class="header" :name="name" :avatar="avatar" />
    <main-card class="xifenTable">
      <div class="button" @click="bindOfficialAccount">公众号绑定</div>
      <my-table class="my-table">
        <el-table :data="xiFenTableData" header-row-class-name="table-header" v-loading="tableLoading" height="100%" style="width: 100%">
          <el-table-column label="编号" header-align="center" align="center" min-width="80" class-name="column-header">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
              <!-- <div>{{scope.row}}</div> -->
            </template>
          </el-table-column>
          <el-table-column prop="wx_avator" label="公众号logo" header-align="center" align="center" min-width="135">
            <template slot-scope="scope">
              <el-avatar :size="22" :src="scope.row.wx_avator"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="wx_name" label="公众号名称" class-name="name" min-width="150"> </el-table-column>
          <el-table-column prop="wx_public_name" header-align="center" align="center" label="公众号类型" min-width="135"> </el-table-column>
          <el-table-column prop="status" header-align="center" align="center" label="授权状态" min-width="135">
            <template slot-scope="scope">
              <div>
                {{ scope.row.status ? '已授权' : '已授权' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" header-align="center" align="center" label="授权时间" min-width="150">
            <template slot-scope="scope">
              {{ new Date(scope.row.create_time) | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="ispowder" header-align="center" align="center" label="吸粉操作" min-width="135">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.ispowder"
                active-value="1"
                inactive-value="2"
                active-color="#249AFF"
                inactive-color="#D5D9DF"
                @change="setIsXifen(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </my-table>
      <el-pagination background layout="prev, pager, next" :page-size="showCount" :total="totalCount" class="my-pagination" />
    </main-card>
    <div class="tips">
      <div class="text">您可能需要了解：</div>
      <div class="items">
        <span
          @click="
            openInfoBox(
              '什么是订阅号：',
              '订阅号生成的活动二维码为原始二维码，每次只能申请一场活动。订阅号同时举行多场活动，扫码后会跳转到开始时间最近的一场活动。【未认证的服务号，也只能生成原始二维码】'
            )
          "
          >什么是订阅号？</span
        >
        <span @click="clickDialog">绑定公众号的流程是什么</span>
        <el-dialog :visible="isShow" @close="closeDialog" title="绑定公众号的流程是什么？">
          <div class="dialog">
            <p>1.使用公众号管理员微信登录https://mp.weixin.qq.com/</p>
            <p>2.点击左侧小程序菜单</p>
            <p>3.点击添加</p>
            <p>4.点击关联小程序</p>
            <p>5.微信扫码</p>
            <p>6.输入小程序id，点击发送关联邀请</p>
          </div>
        </el-dialog>
      </div>
    </div>
    <el-dialog title="绑定公众号" :visible.sync="officialAccountVisible" center>
      <img :src="officialAccountImg" alt="" />
    </el-dialog>
  </sub-page>
</template>

<script>
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
import MyTable from '@/components/myTable';
import XifenHeader from '@/layout/home/components/xifen/xifenHeader';
import { formatDate } from '@/utils/format';

import { getFansList, getFansERCode, getFansSwitch } from '@/api/app/user';
import messageMixin from '@/mixins/messageBoxMixin';

export default {
  name: 'xifenIndex',
  mixins: [messageMixin],
  components: { XifenHeader, MyTable, MainCard, SubPage },
  data() {
    return {
      tableData: [],
      xiFenTableData: [],
      tableLoading: true,
      showCount: 10,
      totalCount: 1,
      currentPage: 1,
      officialAccountImg: '',
      officialAccountVisible: false,
      avatar: '',
      name: '',
      isShow: false,
      authorizer_appid: '',
    };
  },
  filters: {
    // 格式化时间
    dateFormat(value) {
      const date = value;
      return formatDate(date, 'yyyy/MM/dd hh:mm:ss');
    },
  },
  methods: {
    closeDialog() {
      this.isShow = false;
    },
    /* 获取吸粉列表数据 */
    getXifen() {
      getFansList({
        request_from_page: 'app/xifen/index',
      }).then((res) => {
        console.log('吸粉列表数据', res);
        this.xiFenTableData = res.data.authList;
        if (res.data.authList && res.data.authList.length > 0) {
          // this.avatar = res.data.authList[0].head_img;
          // this.name = res.data.authList[0].nick_name;
          // this.authorizer_appid = res.data.authList[0].authorizer_appid;
          this.avatar = res.data.authList[0].wx_avator;
          this.name = res.data.authList[0].wx_name;
          this.authorizer_appid = res.data.authList[0].id;
        }
        this.tableLoading = false;
      });
    },
    /* 设置吸粉开关 */
    setIsXifen(obj) {
      const { authorizer_appid } = obj;
      getFansSwitch({
        auth_appid: authorizer_appid,
        request_from_page: 'app/xifen/index',
      }).then((res) => {
        console.log('set xifen', res);
        this.$message.success('操作成功');
      });
    },
    // 点击绑定公众号按钮
    bindOfficialAccount() {
      // 打开窗口
      this.officialAccountVisible = true;
    },
    clickDialog() {
      this.isShow = true;
    },
  },
  computed: {},
  created() {
    this.getXifen();
    const { id } = this.$store.state.login.userInfo;
    getFansERCode({ id, request_from_page: 'app/xifen/index' })
      .then((data) => {
        this.officialAccountImg = data.qr_url;
      })
      .catch(() => {
        this.alertError('请求出错！');
        return Promise.reject();
      });
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@headerHeight: 110px;
.xifenIndex::v-deep {
  .el-dialog__body {
    text-align: center;
    img {
      width: 100%;
      margin: auto;
      max-width: 380px;
    }
  }
}
.xifenIndex {
  .xifenTable {
    position: relative;
    .button {
      //样式
      font-size: 13px;
      color: #ffffff;
      background-color: #1e87f0;
      width: 54px;
      height: 54px;
      padding: 7px;
      text-align: center;
      line-height: 20px;
      border-radius: 50%;
      //定位
      position: absolute;
      z-index: 1;
      right: 36px;
      top: -18px;
      cursor: pointer;
    }
    .my-table {
      padding-top: 10px;
    }
  }
  .header {
    height: @headerHeight;
  }
  .el-table::v-deep {
    .name {
      padding-left: 20px;
    }
  }
  .tips {
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    margin-top: 5px;
    margin-bottom: 10px;
    .text {
      margin-left: 40px;
      display: inline-block;
      padding-right: 25px;
      color: rgba(0, 0, 0, 0.85);
    }
    .items {
      display: inline-block;

      .el-dialog {
        .dialog {
          margin-top: -26px;
          p {
            text-align: left;
            line-height: 40px;
            letter-spacing: 1px;
          }
        }
      }

      span {
        .blue-text();
        cursor: pointer;
        padding-left: 15px;
        padding-right: 15px;
      }
    }
  }
}
</style>
